<template>
  <div class="w-full relative">
    <div
      v-if="bgColors && bgColors.length > 0"
      class="w-full h-full z-0 absolute"
      :style="{
        background: `linear-gradient(to bottom, ${bgColors[0] || '#ffffff'}, ${
          bgColors[1] || '#f0f8ff'
        })`,
      }"
    ></div>

    <img
      v-if="bgImg"
      :src="bgImg"
      alt="bg-img"
      style="object-fit: cover"
      class="absolute top-0 right-0 w-full h-full z-0"
    />

    <!-- <img
      v-if="bgIcon"
      :src="bgIcon"
      alt="bg-icon"
      class="absolute top-0 right-0 w-[50px] h-[50px] opacity-20 z-10"
    /> -->
    <van-nav-bar :title="title" safe-area-inset-top left-arrow />

    <div class="relative">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  bgIcon: {
    type: String,
    default: "",
  },
  bgImg: {
    type: String,
    default: "",
  },
  bgColors: {
    type: Array as () => string[],
    default: () => [],
  },
});
</script>

<style scoped lang="less">
div {
  --van-nav-bar-background: transparent;
  --van-border-width: 0;
  --van-nav-bar-title-font-size: 18px;
  --van-nav-bar-icon-color: #000000;
}
</style>
